<script setup lang='ts'>
import { ref, toRaw, unref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps<{ visible: boolean, columnInfo: object }>();
const emits = defineEmits<{ (e: 'update:visible', value: boolean): void, (e: 'handleSave', value: boolean): void }>();

import { addColumn, delColumn, editColumn } from '@/api/axios/platformAxios';

interface Type {
    sort?: string;
    name?: string;
    id?: string;
    enable?: string
}

const form = ref<Type>({

});

// do not use same name with ref
watch(props, () => {
    // form.value = props.columnInfo;
    form.value = JSON.parse(JSON.stringify(props.columnInfo));
});

const handleClose = (done: () => void) => {
    emits('update:visible', false);
};

const close = (done: () => void) => {
    ElMessageBox.confirm('确定关闭?')
        .then(() => {
            // done()
            emits('update:visible', false);
        })
        .catch(() => {
            // catch error
        });
};

function save() {
    if (form.value.id) {
        console.log('编辑');
        console.log(form.value);
        //     编辑
        editColumn(form.value).then(res => {
            console.log(res);
            emits("handleSave",true)
            emits('update:visible', false);
        })

    } else {

        console.log('添加');


        if(form.value.name === '' || form.value.sort === '') {
            ElMessage({
                showClose: true,
                message: '栏目名称或排序不能为空',
                type: 'warning',
            })
        } else {
            // 增加
            addColumn(form.value).then(res => {
                console.log(res);
                emits("handleSave",true)
                emits('update:visible', false);
            });
        }
    }

}
</script>

<template>
    <div>
        <el-dialog
            :model-value='props.visible'
            :title="form.sort ? '编辑' : '添加'"
            width='700'
            :before-close='close'
        >
            <div style='margin-bottom: 50px'>

                <el-form :model='form' label-width='auto' style='max-width: 600px;margin: 0 auto;'>
                    <el-form-item label='栏目名称：'>
                        <el-input
                            v-model='form.name'
                            style='width: 315px'
                            maxlength='20'
                            placeholder='请输入名称'
                            show-word-limit
                            type='text'
                            size='large'
                        />
                    </el-form-item>
                    <el-form-item label='排序：'>
                        <el-input
                            v-model.number='form.sort'
                            style='width: 315px'
                            maxlength='3'
                            placeholder='请输入0~100的数字'
                            show-word-limit
                            type='number'
                            size='large'
                        />
                    </el-form-item>
                </el-form>

            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='handleClose' size='large'>取消</el-button>
                    <el-button type='primary' size='large' @click='save'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss'>
.el-form-item__label {
    font-weight: normal;
}

.el-dialog__body {
    padding-bottom: 0;
}

.el-dialog__header {
    background-color: #1892ff;
    margin-right: 0;

    .el-dialog__title {
        font-size: 18px;
        color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
    }
}
</style>
